﻿/*
 @Name project: fs_popup
 @Coding : Nguyễn Trần Minh Trung
 @Date: 01/08/2014
 */
        $.fn.fs_popup_event = function(options, event) {
            var event = event;
            var pop = new popup(options);
            function add_Event(obj) {
                if (event === 'toggle') {
                    $(obj).toggle(function() {
                        pop.open_Aff();
                    }, function() {
                        pop.close_Aff();
                    });
                } else if (event === 'hover') {
                    $(obj).hover(function() {
                        pop.open_Aff();
                    }, function() {
                        pop.close_Aff();
                    });
                } else {
                    $(obj).on(event, function() {
                        pop.open_Aff();
                    });
                }
            }

            //Đưa kết quả vào 
            return this.each(function() {
                add_Event(this);
            });
        };

function popup(options) {
    var id_Pop = 'A_' + Math.floor(Math.random() * 100000);
    var myObj = '#' + id_Pop;
    var def_options = {
        //Nơi chứa thông báo
        dad_Obj: '',
        //Kiểu chèn thông báo : trên hay dưới dad_Obj
        pos_Insert: 'top',
        //Kiểu position : absolute , relative hay static
        pos_Type: 'static',
        //Tên class thông báo
        class: {
            main: 'A_Main',
            head: 'A_Head',
            body: 'A_Body'
        },
        style: {
            color_Main: '#fff',
            color_Head: '',
            border: '5px solid #363636',
            txt_Main_Color: '#000',
            txt_Head_Color: '#000'
        },
        //Chiều dài thông báo
        width: 200,
        //Chiều cao thông báo
        height: 100,
        //Tiêu đề (nếu bằng trống thì không có tiêu đề)
        con_Head: '',
        //Nút tắt thông báo(Mặc định có)
        but_Off: true,
        //Tên class thân thông báo
        con_Body: {
            /*
             * Loại thân thông báo:
             *  text(Mặc định): thân thông báo là 1 đoạn text
             *  html : Thân thông báo là 1 đoạn html
             *  file : Load 1 file khác vào thân thông báo(body là đường dẫn file)
             */
            type: 'text',
            //Thân thông báo
            body: 'content alert'
        },
        //Vị trí popup
        position: {
            /*
             * Vị trí thông báo là tọa độ của popup so với đối tượng gọi
             * +(-)left : về bên trái hay bên phải 1 khoảng bằng chiều dài đối tượng + plus
             * +(-)top: lên trên hay dưới 1 khoảng bằng chiều dài đối tượng + plus
             * center: canh giữa 2 bên
             * +(-)top +(-)left: kết hợp vị trí
             * +(-)num +(-)num : đưa thông số của bạn
             *  ??? center: canh giữa ngang
             *  center ??? canh giữa dọc
             * center : ở giữa đối tượng
             */
            direction: 'center',
            //Công thêm 1 độ dài của bạn
            plus: 0
        },
        //thuộc tính được khai báo khi màn hình được thay đổi
        resize: false,
        /*Hiệu ứng tắt mở thông báo
         * default : sử dụng hiệu ứng hide và show của jquery
         * slide: sử dụng cuộn
         */
        affect_Open: 'default',
        affect_Close: 'default',
        //Số giây thực hiện hiệu ứng
        seconds: 500,
        //Thời gian hoãn sử dụng cho autoclose
        timeDelay: 1000,
        //Tự động tắt sau thời gian hiệu ứng
        auto_Close: false,
        //Màn thông báo
        popup_Display: false,
        //Ẩn hay hiện thông báo lúc đầu
        show: false
    };

    //Nếu không truyền vào option thì lấy mặc định
    this.options = $.extend(def_options, options);
//    this.options = def_options;

    var head = function(obj) {
        var result = '';
        if (obj.options.con_Head !== '') {
            result += '<div class="' + obj.options.class.head + '" >'
                    + '<span>' + obj.options.con_Head + '</span>'
                    + but_Off(obj)
                    + '</div>';
        } else {
            result += '<div class="No_' + obj.options.class.head + '">' + but_Off(obj) + '</div>';
        }
        return result;
    };

    var but_Off = function(obj) {
        return obj.options.but_Off ? '<div class="But_Off"><img width="20px" src="' + lnk + 'img/quit.png" /></div>' : '';
    };

    var obj_Alert = '<div class="fs_Popup" id="' + id_Pop + '">'
            + '<div class="' + this.options.class.main + '" >'
            + head(this)
            + '<div class="' + this.options.class.body + '">'
            + '</div>'
            + '</div>'
            + popup_Display(this)
            + '</div>';

    var style = function(obj) {

        $(myObj + ' .' + obj.options.class.main).css({
            position: 'absolute',
            'z-index': 9999,
            height: obj.options.height,
            width: obj.options.width,
            background: obj.options.style.color_Main,
            color: obj.options.style.txt_Main_Color,
            border: obj.options.style.border,
        });

        if (!obj.options.popup_Display) {
            $(myObj).css({
                height: $(myObj + ' .' + obj.options.class.main).outerHeight(),
                width: $(myObj + ' .' + obj.options.class.main).outerWidth()
            });
        } else {
            $(myObj).css({
                height: $(options.dad_Obj).height(),
                width: $(options.dad_Obj).width()
            });
        }

        $(myObj).css({position: obj.options.pos_Type, display: obj.options.show ? 'block' : 'none'});

        $(myObj + ' .' + obj.options.class.head).css({
            background: obj.options.style.color_Head,
            color: obj.options.style.txt_Head_Color
        });

        if (obj.options.resize) {
            $(window).resize(function() {
                style_Display($(myObj));
                position(obj);
            });
        }
        style_Display($(myObj));
    };

    var style_Display = function(dad_Obj) {
        $(myObj + ',' + myObj + ' .Popup_Display').css({
            width: dad_Obj.innerWidth(),
            height: dad_Obj.innerHeight()
        });
    };

    var body = function(obj) {
        if (obj.options.con_Body.body !== null) {
            var that = $(obj.options.dad_Obj + ' .' + obj.options.class.body);
            switch (obj.options.con_Body.type) {
                case 'text':
                    that.text(obj.options.con_Body.body);
                    break;
                case 'html':
                    that.html(obj.options.con_Body.body);
                    break;
                case 'file':
                    $.ajax({
                        type: 'GET',
                        url: obj.options.con_Body.body,
                        beforeSend: function() {
                            that.html('<div class="Load"><img width="30px" src="' + lnk + '/img/loader.gif" /></div>');
                        },
                        success: function(data) {
                            that.html(data);
                        }
                    });
                    break;
                default:
                    alert('Khai báo sai type body');
                    break;
            }
        }
    };

    function popup_Display(obj) {
        if (obj.options.popup_Display) {
            return '<div style="width:' + $(obj.options.dad_Obj).width() + 'px;height:' + $(obj.options.dad_Obj).height() + 'px" class="Popup_Display"></div>';
        }
    }

    this.close_Aff = function() {
        switch (this.options.affect_Close) {
            case 'slide':
                $(myObj).stop(true).slideUp(this.options.seconds);
                break;
            default:
                $(myObj).stop(true).hide(this.options.seconds);
                break;
        }
    };

    var close_Popup = function(obj) {
        $(myObj).find('.but_Off').click(function() {
            obj.close_Aff();
        });
        if (obj.options.popup_Display) {
            $(myObj).find('.Popup_Display').click(function() {
                obj.close_Aff();
            });
        }
    };

    function position(obj) {
        var popup = obj.options.popup_Display ? $(myObj + ' .' + obj.options.class.main) : $(myObj);
        var main = $(obj.options.dad_Obj);
        var top = '';
        var left = '';
        var pos = obj.options.position.direction.split(' ');
        if (pos.length <= 1) {
            switch (pos[0].toLowerCase()) {
                case 'center':
                    top = (main.height() - popup.height()) / 2;
                    left = (main.width() - popup.width()) / 2;
                    break;
                case 'top':
                    top = -(popup.outerHeight() + obj.options.position.plus);
                    left = 0;
                    break;
                case '-top':
                    top = (main.outerHeight() + obj.options.position.plus);
                    left = 0;
                    break;
                case 'left':
                    top = 0;
                    left = -(popup.outerWidth() + obj.options.position.plus);
                    break;
                case '-left':
                    top = 0;
                    left = (main.outerWidth() + obj.options.position.plus);
                    break;
                default:
                    top = pos[0];
                    left = pos[0];
                    break;
            }
        } else {
            top = pos[0];
            left = pos[1];
            switch (pos[0]) {
                case 'top':
                    top = -(popup.outerHeight() + obj.options.position.plus);
                    break;
                case '-top':
                    top = (main.outerHeight() + obj.options.position.plus);
                    break;
                case 'center':
                    top = (main.outerHeight() - popup.outerHeight()) / 2;
                    break;
                default:
                    top = pos[0];
                    break;
            }

            switch (pos[1]) {
                case 'left':
                    left = -(popup.outerWidth() + obj.options.position.plus);
                    break;
                case '-left':
                    left = (main.outerWidth() + obj.options.position.plus);
                    break;
                case 'center':
                    left = (main.outerWidth() - popup.outerWidth()) / 2;
                    break;
                default:
                    left = pos[1];
                    break;
            }

        }
        $(popup).css({margin: (top + 'px ' + left + 'px')});
    }

    this.open_Aff = function() {
        switch (options.affect_Open) {
            case 'slide':
                $(myObj).stop(true).slideDown(options.seconds);
                break;
            default:
                $(myObj).stop(true).show(options.seconds);
                break;
        }
    };

    var auto_Close = function(obj) {
        if (obj.options.auto_Close) {
            setTimeout(function() {
                obj.close_Aff();
            }, obj.options.timeDelay);
        }
    };

    this.set_Text = function(text) {
        $(myObj).find('.' + this.options.class.head + ' span').text(text);
    };

    this.set_Body = function(type, body_Text) {
        this.options.con_Body.type = type;
        this.options.con_Body.body = body_Text;
        body(this);
    };

    this.contruct = function() {
        if (!this.options.pos_Insert === 'top') {
            $(this.options.dad_Obj).append(obj_Alert);
        } else {
            $(this.options.dad_Obj).prepend(obj_Alert);
        }
        body(this);
        style(this);
        position(this);
        close_Popup(this);
        auto_Close(this);
    };

    return this.contruct();

}
;